<template>
	<view>
		<view class="cardBg">
			<view class="top">
				<view>
					<text class="content">{{queryData.name}}</text>
				</view>
				<view>
					<u-tag :text="queryData.mqttStatus==='Offline'?'Offline':'Online'" mode="light"
						:type="queryData.mqttStatus==='Offline'?'error':'success'" />
				</view>
			</view>
			<view class="bottom">
				<view class="list">
					<text class="title">所在位置：</text>
					<text class="content">{{queryData.address}}</text>
				</view>
				<view class="list">
					<text class="title">联网端口：</text>
					<text class="content">{{queryData.linkstr||'--'}}</text>
				</view>
				<view class="list">
					<text class="title">设备编号：</text>
					<text class="content">{{queryData.deviceNumber||'--'}}</text>
				</view>
				<view class="list">
					<text class="title">所属产品：</text>
					<text class="content">{{queryData.product}}</text>
				</view>
				<view class="list">
					<text class="title">安装时间：</text>
					<text class="content">{{queryData.m_time?queryData.m_time:'--'}}</text>
				</view>
				<view class="list">
					<text class="title">数据模板：</text>
					<text class="content">{{queryData.template}}</text>
				</view>
				<view class="list">
					<text class="title">联系人：</text>
					<text class="content">{{queryData.contacts||'--'}}</text>
				</view>
			</view>
		</view>
		<view class="cardBg">
			<view class="bottom">
				<view class="list">
					<text class="title">通讯地址：</text>
					<text class="content">{{queryData.addr}}</text>
				</view>
				<view class="list">
					<text class="title">波特率：</text>
					<text class="content">{{queryData.baudrate}}</text>
				</view>
				<view class="list">
					<text class="title">数据位：</text>
					<text class="content">{{queryData.databits||'--'}}</text>
				</view>
				<view class="list">
					<text class="title">奇偶校验：</text>
					<text class="content">{{queryData.parity||'--'}}</text>
				</view>
				<view class="list">
					<text class="title">停止位：</text>
					<text class="content">{{queryData.stopbits}}</text>
				</view>
			</view>
		</view>
		<view class="cardBg">
			<map id="map" :longitude="queryData.longitude" :latitude="queryData.latitude" scale="14" :markers="covers"
				style="width: 100%; height: 300px;border-radius: 24px;">
				<map-marker v-for="(marker, index) in markers" :key="index" :id="marker.id"
					:longitude="marker.longitude" :latitude="marker.latitude" :iconPath="marker.iconPath"
					@tap="onMarkerTap" :callout="{content: marker.title}">
				</map-marker>
			</map>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				markers: [{
					id: 'marker1',
					longitude: 113.4041, // 标注点经度
					latitude: 13.9151, // 标注点纬度
					iconPath: '@/static/device-1.png', // 自定义标注点图标路径
					title: '标记点1', // 标注点弹出框标题
				}],
			}
		},
		props: {
			queryData: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		computed: {
			covers() {
				return [{
					id: 0,
					latitude: this.queryData.latitude,
					longitude: this.queryData.longitude,
					width: 50,
					height: 50
				}]
			}
		},
		onReady() {},
		methods: {
			async test() {
				let test = await gw.isOnline('ASCG123456789')
				console.log('测试~~~', test)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardBg {
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid rgba(228, 230, 232, 1);
			padding: 10px 0 10px;
		}

		.bottom {
			padding: 20px 0 0px;
		}

		.list {
			line-height: 40px;

			.title {
				font-size: 15px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 17.58px;
				color: rgba(10, 22, 41, 1);
				text-align: left;
				vertical-align: top;
				display: inline-block;
				width: 88px;
			}

			.content {
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 16.41px;
				color: rgba(145, 146, 158, 1);
				text-align: left;
				vertical-align: top;
				// padding-left: 10px;
			}
		}
	}
</style>
